<!--
 * @Description: 羊舍迁移
-->
<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div class="sheep-house-bar">
        <div class="sheep-bar">
          <div class="label-title">羊舍:</div>
          <div class="label-name">
            <el-select v-model="value" placeholder="请选择" @change="getValue1(value)">
              <el-option
                v-for="item in options"
                :key="item.facilityGroupId"
                :label="item.groupName"
                :value="item.groupName"
              />
            </el-select>
          </div>
          <div class="sheepfold">
            <ul>
              <li v-for="item in sheepRing" :key="item.facilityId">
                <el-radio
                  v-model="radio"
                  :label="item.facilityName"
                  :disabled="showDisabled1(item.facilityId)"
                  @change="selectSheepRing(item.facilityId)"
                >{{ item.facilityName }}</el-radio>
              </li>
            </ul>
          </div>
        </div>
        <div class="sheep-bar">
          <div class="label-title">羊舍:</div>
          <div class="label-name">
            <el-select v-model="value2" placeholder="请选择" @change="getValue2(value2)">
              <el-option
                v-for="item in options2"
                :key="item.facilityGroupId"
                :label="item.groupName"
                :value="item.groupName"
              />
            </el-select>
          </div>
          <div class="sheepfold">
            <ul>
              <li v-for="item in sheepRing2" :key="item.facilityId">
                <el-radio
                  v-model="radio2"
                  :disabled="showDisabled2(item.facilityId)"
                  :label="item.facilityName"
                  @change="selectSheepRing2(item.facilityId)"
                >{{ item.facilityName }}</el-radio>
              </li>
            </ul>
          </div>
        </div>
        <div class="mainContent">
          <div v-if="showOne" class="sheepFoldLeft">
            <div class="sheepFoldLeftTitle">
              <div class="titleOut">
                <div class="titleInner">
                  <div class="title">{{ sheepRoomName }}--{{ sheepRingName }}</div>
                  <div class="search">
                    <div class="search-label">耳标:</div>
                    <div class="search-input">
                      <el-input
                        v-model="eagTag"
                        clearable
                        placeholder="请输入耳标"
                      />
                    </div>
                    <div class="ml-20" style="margin-top:10px;" @click="search">
                      <img src="~@/assets/action-bar-icon/search.png" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 1号羊舍搜索前的拖拽组件 -->
            <draggable
              v-if="showBefore"
              v-model="sheepArr"
              style="width:100%; height:574px;"
              group="site"
              animation="300"
              class="contain"
              @end="end"
              @change="handleRemove"
            >
              <div v-for="item in sheepArr" :key="item.bionId" class="items">
                <table>
                  <tr>
                    <td rowspan="2" class="img">
                      <img
                        src="~@/assets/commont/sheep.png"
                        alt="Smiley face"
                        width="70"
                      />
                    </td>
                    <td>{{ item.name }} :{{ item.number }}</td>
                  </tr>
                  <tr>
                    <td class="line">耳标编号:{{ item.eagTag }}</td>
                  </tr>
                </table>
              </div>
            </draggable>
            <!-- 1号羊舍搜索后的拖拽组件 -->
            <draggable
              v-if="showAfter"
              v-model="filterSheep"
              group="site"
              animation="300"
              class="contain"
              @end="end"
              @change="handleRemove"
            >
              <div v-for="item in filterSheep" :key="item.bionId" class="items">
                <table>
                  <tr>
                    <td rowspan="2" class="img">
                      <img
                        src="~@/assets/commont/sheep.png"
                        alt="Smiley face"
                        width="70"
                      />
                    </td>
                    <td>{{ item.name }} :{{ item.number }}</td>
                  </tr>
                  <tr>
                    <td class="line">耳标编号:{{ item.eagTag }}</td>
                  </tr>
                </table>
              </div>
            </draggable>
          </div>
          <div v-if="showTwo" class="sheepFoldRight">
            <div class="sheepFoldRightTitle">
              <div class="titleOut">
                <div class="titleInner">
                  <div class="title">{{ sheepRoomName2 }}--{{ sheepRingName2 }}</div>
                  <div class="search">
                    <div class="search-label">耳标:</div>
                    <div class="search-input">
                      <el-input
                        v-model="eagTag2"
                        clearable
                        placeholder="请输入耳标"
                      />
                    </div>
                    <div class="ml-20" style="margin-top:10px;" @click="search2">
                      <img src="~@/assets/action-bar-icon/search.png" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 2号羊舍搜索前的拖拽组件 -->
            <draggable
              v-if="showBefore2"
              v-model="sheepArr2"
              style="width:100%; height:574px;"
              group="site"
              animation="300"
              class="contain"
              @end="end2"
              @change="handleRemove2"
            >
              <div v-for="item in sheepArr2" :key="item.bionId" class="items">
                <table>
                  <tr>
                    <td rowspan="2" class="img">
                      <img
                        src="~@/assets/commont/sheep.png"
                        alt="Smiley face"
                        width="70"
                      />
                    </td>
                    <td>{{ item.name }} :{{ item.number }}</td>
                  </tr>
                  <tr>
                    <td class="line">耳标编号:{{ item.eagTag }}</td>
                  </tr>
                </table>
              </div>
            </draggable>
            <!-- 2号羊舍搜索后的拖拽组件 -->
            <draggable
              v-if="showAfter2"
              v-model="filterSheep2"
              group="site"
              animation="300"
              class="contain"
              @end="end2"
              @change="handleRemove2"
            >
              <div v-for="item in filterSheep2" :key="item.bionId" class="items">
                <table>
                  <tr>
                    <td rowspan="2" class="img">
                      <img
                        src="~@/assets/commont/sheep.png"
                        alt="Smiley face"
                        width="70"
                      />
                    </td>
                    <td>{{ item.name }} :{{ item.number }}</td>
                  </tr>
                  <tr>
                    <td class="line">耳标编号:{{ item.eagTag }}</td>
                  </tr>
                </table>
              </div>
            </draggable>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import draggable from "vuedraggable"; // 拖拽组件
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import req from "@/api/digital-production/Individual-bio-management/individual-migration-management/index";
import { mymixin } from "@/utils/mixin";

export default {
  name: "IndividualMigrationManagement",
  components: { BaseMainSlot, draggable },
  mixins: [mymixin],
  data() {
    return {
      drag: false,
      firstId: "",
      secondId: "",
      tableData: [],
      TaskDetail: [],
      checklist: [],
      FaciltyInfo: [],
      showIndex: [],
      bionId: "",
      currentFacilityId: "",
      targetFacilityId: "",
      /* 改版羊舍开始 */
      condition: { current: "", target: "" },
      sheepFoldLeft: [1, 2, 3, 4, 5],
      /* 改版羊舍结束 */
      // 我自己定义的数据
      //           羊舍1号数据 ```````
      eagTag: "", // 羊舍1号输入框耳标
      showBefore: true, // 羊舍1号搜索前的布尔值，当点击搜索，隐藏
      showAfter: false, // 羊舍1号搜索后的布尔值，当点击搜索，展示过滤后的信息
      filterSheep: [], // 点击搜索，过滤后的数组
      options: [],
      value: '',
      sheepRoomName: "", // 羊舍1号 的羊舍名字
      facilityGroupIdOne: "", // 羊舍1号 的设施组id
      // 羊舍1号对应的羊圈数据
      sheepRing: [],
      radio: '1', // 单选框绑定
      // 羊舍1号的拖拽羊数据
      sheepArr: [],
      // 羊舍1号 的羊圈名字
      sheepRingName: "",
      // 羊舍1号 的羊圈id
      facilityIdOne: "",
      // 控制拖拽组件的显示跟隐藏
      showOne: false,
      //           羊舍2号数据 ``````
      eagTag2: "", // 羊舍1号输入框耳标
      showBefore2: true, // 羊舍2号搜索前的布尔值，当点击搜索，隐藏
      showAfter2: false, // 羊舍2号搜索后的布尔值，当点击搜索，展示过滤后的信息
      filterSheep2: [], // 点击搜索，过滤后的数组
      options2: [],
      value2: '',
      sheepRoomName2: "", // 羊舍2号 的羊舍名字
      facilityGroupIdTwo: "", // 羊舍2号 的设施组id
      // 羊舍2号对应的羊圈数据
      sheepRing2: [],
      radio2: '1', // 单选框绑定
      // 羊舍2号的拖拽羊数据
      sheepArr2: [],
      // 羊舍2号 的羊圈名字
      sheepRingName2: "",
      // 羊舍2号 的羊圈id
      facilityIdTwo: "",
      // 控制拖拽组件的显示跟隐藏
      showTwo: false
    };
  },
  watch: {},
  mounted() {
    this.getSheepRoom();
    console.log(this.radio)
  },
  methods: {
    end(e) {
      // console.log('sheepArr=>', this.sheepArr)
      // console.log('sheepArr2=>', this.sheepArr2)
    },
    end2(e) {
      // console.log('sheepArr=>', this.sheepArr)
      // console.log('sheepArr2=>', this.sheepArr2)
    },
    showDisabled1(data) {
      var index = this.sheepRing2.findIndex(item => item.facilityName === this.radio2)
      if (index !== -1) {
        if (data === this.sheepRing2[index]['facilityId']) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    showDisabled2(data) {
      var index = this.sheepRing.findIndex(item => item.facilityName === this.radio)
      if (index !== -1) {
        if (data === this.sheepRing[index]['facilityId']) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    /* 获取羊舍信息 */
    getSheepRoom() {
      let params = {}
      req.getSheepRoom(params).then((res) => {
        let data = res.data
        this.options = data
        this.options2 = data
        console.log('查羊舍=>', data)
      })
    },
    // 羊舍2号迁移到羊舍1号的过程
    handleRemove(val) {
      console.log(val)
      if (val.added === undefined) {
        // 防止报错
        console.log(1)
      } else {
        if (val.added.element.bionId) {
          let bionId = val.added.element.bionId
          let params = {
            bionId: bionId, // 拖拽羊的id
            currentFacilityGroupId: this.facilityGroupIdTwo, // 当前设施组id
            currentFacilityId: this.facilityIdTwo, // 当前设施id
            targetFacilityGroupId: this.facilityGroupIdOne, // 目标设施组id
            targetFacilityId: this.facilityIdOne // 目标设施id
          }
          // console.log(params)
          req.sheepMove(params).then((res) => {
          // console.log(res.msg)
            if (res.code === 1) {
              this.$message.success("迁移成功！！！");
            } else {
              this.$message.success("迁移失败！！！");
            }
          })
        }
      }
    },
    // 羊舍1号迁移到羊舍2号的过程
    handleRemove2(val) {
      console.log(val)
      // console.log(val.added.element.bionId)
      // 入果有从羊舍1号拖拽在羊舍2号的 羊 发请求
      if (val.added === undefined) {
        // 防止报错
        console.log(1)
      } else {
        if (val.added.element.bionId) {
          let bionId = val.added.element.bionId
          let params = {
            bionId: bionId, // 拖拽羊的id
            currentFacilityGroupId: this.facilityGroupIdOne, // 当前设施组id
            currentFacilityId: this.facilityIdOne, // 当前设施id
            targetFacilityGroupId: this.facilityGroupIdTwo, // 目标设施组id
            targetFacilityId: this.facilityIdTwo // 目标设施id
          }
          // console.log(params)
          req.sheepMove(params).then((res) => {
          // console.log(res.msg)
            if (res.code === 1) {
              this.$message.success("迁移成功！！！");
            } else {
              this.$message.success("迁移失败！！！");
            }
          })
        }
      }
      // console.log(val)
      // if (val.element.facilityId)
      // let count = 0;
      // if (val.removed) {
      //   this.TaskDetail.forEach((items, indexs) => {
      //     if (items.id !== val.removed.element.facilityId) {
      //       let params = {
      //         bionId: val.removed.element.bionId,
      //         currentFacilityId: val.removed.element.facilityId,
      //         targetFacilityId: items.id
      //       };
      //       count++;
      //       if (count === 1) {
      //         req.postMigrationRecordAdd(params).then((res) => {
      //           if (res.code === 1) {
      //             this.$message.success("迁移成功！！！");
      //             val.removed.element.facilityId = items.id;
      //             return 1;
      //           } else {
      //             this.$message.error("迁移失败！！！");
      //           }
      //         });
      //       }
      //     }
      //   });
      // }
    },
    // 获取羊舍1号的name
    getValue1(value) {
      let sheepRoomName = value
      // 根据羊舍1号的名字--> 获取羊舍id后 根据id查羊圈
      let sheepRoomId = this.options.filter(item => item.groupName === sheepRoomName)[0].facilityGroupId
      this.facilityGroupIdOne = sheepRoomId
      req.getSheepRing(sheepRoomId).then((res) => {
        this.sheepRing = res.data
        console.log(res.data)
      })
      this.sheepRoomName = sheepRoomName
      console.log(sheepRoomName, sheepRoomId)
      this.showOne = false
    },
    // 获取羊舍2号的name
    getValue2(value) {
      let sheepRoomName = value
      // 根据羊舍2号的名字--> 获取羊舍id后 根据id查羊圈
      // console.log(sheepRoomName)
      let sheepRoomId = this.options2.filter(item => item.groupName === sheepRoomName)[0].facilityGroupId
      this.facilityGroupIdTwo = sheepRoomId
      req.getSheepRing(sheepRoomId).then((res) => {
        this.sheepRing2 = res.data
        console.log(res.data)
      })
      this.sheepRoomName2 = sheepRoomName
      console.log(sheepRoomName, sheepRoomId)
      this.showTwo = false
    },
    // 获取羊舍1号的 羊圈的name
    selectSheepRing(facilityId) {
      // 当用户没有选择羊圈之前 拖拽组件是隐藏的
      if (this.radio === '1') {
        console.log()
      } else {
        this.showOne = true
        let sheepRingName = this.radio
        console.log('羊圈名称=>', sheepRingName)
        this.sheepRingName = sheepRingName
        // 通过羊圈id 查找下面拖拽组件的羊数据
        console.log('羊圈id=>', facilityId)
        this.facilityIdOne = facilityId
        req.getTuoZhuai(facilityId).then((res) => {
          console.log('拖拽信息', res.data)
          if (res.data) {
            this.sheepArr = res.data
          } else {
            this.sheepArr = []
          }
        })
        this.showBefore = true
        this.showAfter = false
      }
    },
    // 获取羊舍2号的 羊圈的name
    selectSheepRing2(facilityId) {
      if (this.radio2 === '1') {
        console.log()
      } else {
        this.showTwo = true
        let sheepRingName = this.radio2
        console.log('羊圈名称=>', sheepRingName)
        this.sheepRingName2 = sheepRingName
        // 通过羊圈id 查找下面拖拽组件的羊数据
        console.log('羊圈id=>', facilityId)
        this.facilityIdTwo = facilityId
        req.getTuoZhuai(facilityId).then((res) => {
          console.log('拖拽信息', res.data)
          if (res.data) {
            this.sheepArr2 = res.data
          } else {
            this.sheepArr2 = []
          }
        })
        this.showBefore2 = true
        this.showAfter2 = false
      }
    },
    // 1号羊圈搜索框
    search() {
      if (this.eagTag === '') {
        this.$message.success("请输入耳标！！！");
      } else if (this.eagTag.length !== 15) {
        this.$message.success("请输入15位耳标！！！");
      } else {
        console.log(this.eagTag)
        let filter = this.sheepArr.filter(item => item.eagTag === this.eagTag)
        this.filterSheep = filter
        console.log(filter)
        if (filter.length === 0) {
          this.$message.success("未找到该耳标！！！");
        } else {
          this.showBefore = false
          this.showAfter = true
        }
      }
    },
    // 2号羊圈搜索框
    search2() {
      if (this.eagTag2 === '') {
        this.$message.success("请输入耳标！！！");
      } else if (this.eagTag2.length !== 15) {
        this.$message.success("请输入15位耳标！！！");
      } else {
        let filter = this.sheepArr2.filter(item => item.eagTag === this.eagTag2)
        this.filterSheep2 = filter
        if (filter.length === 0) {
          this.$message.success("未找到该耳标！！！");
        } else {
          this.showBefore2 = false
          this.showAfter2 = true
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.app-main {
  height: 100%;
}
.action-bar {
  width: 100%;
}
.list {
  width: 100%;
  white-space: nowrap;
  padding: 10px;
  //overflow: auto;
  .item {
    float: left;
    white-space: nowrap;
    width: 140px;
    height: 30px;
    margin: 5px;
    list-style: none;
    text-align: center;
    line-height: 28px;
    border-radius: 14px;
    color: rgba(23, 176, 203);
    .el-button {
      height: 15px;
      width: 15px;
    }
  }
}
::v-deep .zhcontent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  .show {
    margin: auto;
    width: 40%;
    height: 90%;
    overflow: auto;
    background: rgba(105, 141, 184, 0.178);
  }
}
.show > div {
  width: 100%;
  height: 100%;
  ::v-deep span {
    min-height: 10px;
    width: 100%;
  }
}
.img {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 70px;
  img {
    border-radius: 50%;
  }
}
.sheepFoldLeft,
.sheepFoldRight {
  width: 50%;
  border: 1px solid #04cfc4;
  padding: 0 5px;
  div {
    height: 50px;
  }
  .items {
    color: #4b3b3d;
    width: 50%;
    height: 112px;
    border-radius: 40px;
    padding: 16px 12px;
    margin: 10px 0px;
    background-color: #fdfdfd;
    box-sizing: no;
  }
  table {
    font-size: 16px;
    height: 100%;
    width: 80%;
    border: 0px;
  }
  td {
    border: 0px;
    text-align: left;
    align-items: center;
  }
  .line {
    border-top: 1px solid #4ea099;
  }
  .items:hover {
   background-color: #4c8189;
    cursor: move;
  }
}

.itemBox {
  width: 160px;
  height: 40px;
  line-height: 28px;
  padding: 6px;
  border: 1px solid black;
}
.sheep-house-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.sheep-bar {
  width: 100%;
  height: 55px;
  background: #00485a;
  font-size: 18px;
  display: flex;
  line-height: 50px;
}
.label-title {
  width: 150px;
  text-align: right;
  margin-right: 20px;
  color: #05e0d2;
}
.label-name {
  width: 170px;
  height: 55px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
ul,
li {
  margin: 0;
}
::v-deep ::-webkit-scrollbar {
  // width: 4px;
  height: 5px;
}
.sheepfold {
  height: 55px;
  width: calc(100% - 500px);
  overflow-x: auto;
  ul {
    display: flex;
  }
  ul li {
    flex: none;
    // margin: 0 10px;
    width: 150px;
    background: #9f7634;
    list-style: none;
    border-radius: 22.5px;
    margin: 0 20px;
  }
}
.sheepFoldLeftTitle,
.sheepFoldRightTitle {
  width: 100%;
  .titleOut {
    height: 50px;
    overflow: hidden;
    .titleInner {
      position: relative;
      width: 100%;
    }
    .titleInner:hover {
      top: -50px;
    }
    .search {
      display: flex;
      line-height: 50px;
      font-size: 18px;
      justify-content: center;
    }
  }
  .title {
    // position: absolute;
    background: linear-gradient(to bottom, #15c1e4e5, #37a5a3);
    z-index: 301;
    width: 100%;
    // position: fixed;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    color: black;
    clip-path: polygon(90% 0%, 10% 0%, 20% 100%, 80% 100%);
    box-shadow: rgb(170, 149, 56) 0px 0px 10px inset;
    // transform: skew(25deg);
  }
}
.contain {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.sheepFoldLeft,
.sheepFoldRight {
  width: 48%;
  max-height: 100%;
  background: #004b56;
  position: relative;
  overflow: auto;
}
.mainContent {
  width: 100%;
  height: calc(100% - 140px);
  // background: red;
  display: flex;
  justify-content: space-around;
  overflow: auto;
}
.staff-manage .common-layout .search-box .label-input .label {
  line-height: 36px;
  font-size: 18px;
  width: 140px;
}
.outer {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  overflow: hidden;
  height: 36px !important;
  .inner {
    position: relative;
  }
  .active {
    top: -36px;
  }
}
.searchGroup,
.searchFacilty {
  display: flex;
}

::v-deep {
  .el-radio {
    color: white !important;
    //添加边框
    /* border: 1px solid rgb(207, 204, 204); */
    //选中时边框的颜色
    /* &.is-checked {
        border: 1px solid #28d4c1 !important;
      } */
    //鼠标滑过改变字体和小圆圈边框的样式
    &:hover {
      border-color: #25a785 !important;
      color: #25a785 !important;
      //鼠标滑过时小圆点边框显示
      .el-radio__inner {
        border-color: #25a785;
      }
    }
    .el-radio__label {
      line-height: 17px;
      display: inline-block;
      font-size: 16px;
      padding-left: 10px;
      width: 80px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .el-radio__input {
      line-height: 20px;
      padding-left: 30px;
      margin-bottom: px(5);
      //选中时的样式
      &.is-checked {
        .el-radio__inner {
          //选中时小圆圈的的颜色
          background-color: #25a785;
          border-color: #25a785;
        }
        + .el-radio__label {
          //选中时字体的颜色
          color: white !important;
        }
      }
      .el-radio__inner {
        width: 20px;
        height: 20px;
        // 鼠标滑过小圆点时的样式

        &:hover {
          border-color: #25a785;
        }
      }
    }
  }
}
</style>
